

<template>
  <div class="food-route-planning">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
          <div class="input-tip-title">
            <div class="tip">
              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
            </div>
            <div class="title">关于AR景点导航,您还需要明确具体内容:</div>
          </div>
          <div class="category-list">
            <el-form label-width="70" style="margin-left: 8px;margin-bottom: 10px;" :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="历史文旅" style="margin-bottom: 10px">
                <el-select clearable :disabled="TravelHobbyList[0].isShow" v-model="formInline.travelInterestHistory" placeholder="请选择"
                            @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[0],formInline.travelInterestHistory)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[0].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="民俗文旅" style="margin-bottom: 10px">
                <el-select clearable :disabled="TravelHobbyList[1].isShow" v-model="formInline.travelInterestFolkways"
                           placeholder="请选择"  @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[1],formInline.travelInterestFolkways)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[1].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="名人文旅" style="margin-bottom: 10px">
                <el-select clearable :disabled="TravelHobbyList[2].isShow" v-model="formInline.travelInterestCelebrity"
                           placeholder="请选择"  @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[2],formInline.travelInterestCelebrity)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[2].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="红色文旅">
                <el-select clearable :disabled="TravelHobbyList[3].isShow" v-model="formInline.travelInterestRed"
                           placeholder="请选择"  @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[3],formInline.travelInterestRed)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[3].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="美食文旅">
                <el-select clearable :disabled="TravelHobbyList[4].isShow" v-model="formInline.travelInterestGourmet"
                           placeholder="请选择"  @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[4],formInline.travelInterestGourmet)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[4].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="网红文旅">
                <el-select clearable :disabled="TravelHobbyList[5].isShow" v-model="formInline.travelInterestInfluencer"
                           placeholder="请选择"  @clear="clearHistory"
                           @change="changeHistory(TravelHobbyList[5],formInline.travelInterestInfluencer)">
                  <el-option
                      v-for="(item,index) in TravelHobbyList[5].informationNames"
                      :key="index"
                      :label="item.landmarkName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="input-bottom-dialogue" v-if="isNavigationShow">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">

        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">关于晋祠AR景区导航,您还需要明确具体内容:</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="navigationClick(item,index)"
                 :class="currentNavigation===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in navigationList">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="input-bottom-dialogue" v-if="currentNavigation>-1">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
          <div class="input-tip-title">
            <div class="tip">
              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
            </div>
            <div class="title">关于景点导航,您还需要明确具体内容:</div>
          </div>
          <div class="category-list">
            <div @click="distanceClick(item,index)"
                 :class="currentDistance===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in distanceFromAttractionsList">
              <div class="category-list-item-title">
                {{item.placeName}}
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
</template>
<script setup>

import IntelligentlyGeneratedAI from "@/views/home/components/PreTripPlanning/IntelligentlyGeneratedAI.vue";
import {reactive, ref} from "vue";
import api from "@/service/TouristHomepage";
import {useTouristHomepageStore} from "@/store/touristHomepage";
let formInline=reactive({
  travelInterestHistory: '',
  travelInterestFolkways:'',
  travelInterestCelebrity:'',
  travelInterestRed:'',
  travelInterestGourmet:'',
  travelInterestInfluencer:''
})
const currentNavigation=ref(-1);
const navigationList=ref([
  {
    id:'1',
    name:'景点导航',
    price:'10',
    distance:'10',
    isSelected:false
  },
  {
    id:'2',
    name:'卫生间导航',
    price:'10',
    distance:'10',
    isSelected:false
  },
  {
    id:'3',
    name:'餐饮点导航',
    price:'10',
    distance:'10',
    isSelected:false
  },
  {
    id:'4',
    name:'停车场导航',
    price:'10',
    distance:'10',
    isSelected:false
  },
    {
      id:'5',
    name:'客服中心导航',
    price:'10',
    distance:'10',
    isSelected:false
  },
    {
      id:'6',
    name:'警务中心导航',
    price:'10',
    distance:'10',
    isSelected:false
  },
])

function navigationClick(data,index){
  currentNavigation.value=index;
  currentDistance.value=-1;

  attractionNavigationDetails()
}
// 景区导航列表
function attractionNavigationDetails(){
  let prams={
    landmarkId:currentNavigationLabel.value,
    navigationType:navigationList.value[currentNavigation.value].id
  }
  api.getAttractionNavigationList(prams).then(res=>{
    distanceFromAttractionsList.value=res.data;
  })
}
const currentDistance=ref(-1);
const distanceFromAttractionsList=ref([]);
function distanceClick(data,index){
  currentDistance.value=index;


}
const TravelHobbyList=ref([
  {
    categoryName: '历史文旅',
    id: '1',
    value:'',
    isShow:false,
  },
  {
    categoryName: '民俗文旅',
    id: '2',
    value:'',
    isShow:false,
  },
  {
    categoryName: '名人文旅',
    id: '3',
    value:'',
    isShow:false,
  },
  {
    categoryName: '红色文旅',
    id: '4',
    value:'',
    isShow:false,
  },
  {
    categoryName: '美食文旅',
    id: '5',
    value:'',
    isShow:false,
  },
  {
    categoryName: '网红文旅',
    id: '6',
    value:'',
    isShow:false,
  }
])
// 计算属性
const cityCode=computed(()=>{
  if(useTouristHomepageStore().setTouristCityInfo){
    return useTouristHomepageStore().setTouristCityInfo.cityCode;
  }
})
// 请求旅游信息-文化旅游一级分类类别列表数据
function getCategoryListApi(data){
  api.getCategoryList(data).then((res) => {

    TravelHobbyList.value.forEach(item=>{
      res.data.forEach(item1=>{
        if(Number(item.id)===Number(item1.id)){
          item.informationNames=item1.informationNames;
          item.categoryCode=item1.categoryCode;
          item.divisionName=item1.divisionName;
          item.divisionCode=item1.divisionCode;
        }
      })
    })

  });
}
const isNavigationShow=ref(false);
// 当前点击的景点
const currentNavigationLabel=ref('');
function clearHistory(){
  TravelHobbyList.value.forEach((item,index)=>{
    item.isShow=false;
  })
  currentNavigation.value=-1;
  formInline.travelInterestHistory='';
  formInline.travelInterestFolkways='';
  formInline.travelInterestCelebrity='';
  formInline.travelInterestRed='';
  formInline.travelInterestGourmet='';
  formInline.travelInterestInfluencer='';

}
function changeHistory(obj,data){
  if(data){
    TravelHobbyList.value.forEach((item,index)=>{
      if(Number(item.id)!==Number(obj.id)){
        item.isShow=true;
      }
    })

    isNavigationShow.value=true;
    currentNavigationLabel.value=JSON.parse(JSON.stringify(data));
    useTouristHomepageStore().setTouristClearStatus(false)
  }
}
// 监听useTouristHomepageStore().touristClearStatus
watch(() => useTouristHomepageStore().touristClearStatus, () => {
  if(useTouristHomepageStore().touristClearStatus){
    isNavigationShow.value=false;
    currentNavigation.value=-1;
    clearHistory()

  }
})
onMounted(() => {
  getCategoryListApi({divisionCode:cityCode.value})
})
</script>
<style scoped lang="scss">
@import "@/assets/main.scss";
.food-route-planning{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 146px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;

          //  换行
          flex-wrap: wrap;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;


        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//旅游路线规划
.input-bottom-dialogue{
  display: flex;
  margin: 20px 0;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 106px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//  旅游路线规划
.specifics{
  margin-top: 20px;
}
</style>
<style>
@import "@/assets/main.scss";
</style>